window.onload =
    function()
    {
        var taskList = document.getElementById('task-list');

        var addTaskEntryButton = document.getElementById('button-add-task-entry');
        var removeTaskEntryButton = document.getElementById('button-remove-task-entry');
        var showTaskEntriesButton = document.getElementById('button-show-task-entries');
        var hideTaskEntriesButton = document.getElementById('button-hide-task-entries');

        function addTaskEntry()
        {
            var task = document.getElementById('task');

            if (task)
            {
                var liElement = document.createElement('li');

                // not working (it doesn't add the value)
                //var checkboxWithValue = document.createElement('input');
                //checkboxWithValue.setAttribute('type', 'checkbox');
                //checkboxWithValue.setAttribute('value', task.value.toString());
                //liElement.appendChild(checkboxWithValue);

                var liInnerHTMLFragment = '<input type="checkbox" />' + task.value;
                liElement.innerHTML += liInnerHTMLFragment;

                taskList.appendChild(liElement);
            }
        }

        function deleteTaskEntry()
        {
            var allTasks = taskList.querySelectorAll('li input');

            for (var i = 0; i < allTasks.length; i++)
            {
                if (allTasks[i].checked)
                {
                    // removes the li entry
                    taskList.removeChild(allTasks[i].parentNode);
                }
            }
        }

        function showTasksEntries()
        {
            var allTasks = taskList.querySelectorAll('li input');

            for (var i = 0; i < allTasks.length; i++)
            {
                if (allTasks[i].parentNode.style.display === 'none')
                {
                    allTasks[i].parentNode.style.display = 'block';
                }
            }
        }

        function hideTaskEntries()
        {
            var allTasks = taskList.querySelectorAll('li input');

            for (var i = 0; i < allTasks.length; i++)
            {
                if (allTasks[i].checked)
                {
                    allTasks[i].parentNode.style.display = 'none';
                }
            }
        }

        addTaskEntryButton.addEventListener('click', addTaskEntry);
        removeTaskEntryButton.addEventListener('click', deleteTaskEntry);
        showTaskEntriesButton.addEventListener('click', showTasksEntries);
        hideTaskEntriesButton.addEventListener('click', hideTaskEntries);
    };